<template>
  <div class="dashboard-container">
    <el-main class="main-content">
      <!-- 统计卡片 -->
      <el-row :gutter="20" class="stats-row">
        <el-col :span="6">
          <el-card shadow="hover">
            <el-statistic title="今日活跃用户" :value="stats.activeUsers" />
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover">
            <el-statistic title="新增课程数" :value="stats.newCourses" />
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover">
            <el-statistic title="待批改作业" :value="stats.pendingWorks" />
          </el-card>
        </el-col>
        <el-col :span="6">
          <el-card shadow="hover">
            <el-statistic title="系统消息" :value="stats.newMessages" />
          </el-card>
        </el-col>
      </el-row>

      <!-- 快捷入口 -->
      <el-card class="quick-access">
        <template #header>
          <div class="card-header">
            <span>常用功能</span>
          </div>
        </template>
        <el-row :gutter="20">
          <el-col v-for="(item, index) in quickActions" :key="index" :span="4">
            <el-button type="primary" :icon="item.icon" circle @click="item.action" />
            <p class="action-label">{{ item.label }}</p>
          </el-col>
        </el-row>
      </el-card>

      <!-- 课程动态 -->
      <el-card class="course-activity">
        <template #header>
          <div class="card-header">
            <span>最新课程动态</span>
          </div>
        </template>
        <el-timeline>
          <el-timeline-item
            v-for="(activity, index) in activities"
            :key="index"
            :timestamp="activity.time"
          >
            {{ activity.content }}
          </el-timeline-item>
        </el-timeline>
      </el-card>
    </el-main>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router";
import { EditPen, Upload, DataLine, Bell } from "@element-plus/icons-vue";
const router = useRouter();
const stats = ref({
  activeUsers: 1423,
  newCourses: 15,
  pendingWorks: 23,
  newMessages: 5,
});

const quickActions = ref([
  { icon: EditPen, label: "新建课程", action: () => navigateTo("/subject/index") },
  { icon: Upload, label: "上传资料", action: () => navigateTo("/resource/index") },
  { icon: DataLine, label: "数据统计", action: () => navigateTo("/analytics") },
  { icon: Bell, label: "消息通知", action: () => navigateTo("/notifications") },
]);

const activities = ref([
  {
    time: "2024-03-15 09:30",
    content: "数据结构与算法课程新增实验章节",
  },
  {
    time: "2024-03-14 16:15",
    content: "C语言基础课程更新了指针章节的练习题",
  },
  {
    time: "2024-03-14 10:00",
    content: "系统维护更新完成，新增作业自动批改功能",
  },
]);

const navigateTo = (path: string) => {
  const sPaths = ["/notifications", "/analytics"];
  if (!sPaths.includes(path)) router.push(path);
};
</script>

<style scoped lang="scss">
.dashboard-container {
  height: 100vh;
  display: flex;
  flex-direction: column;

  .main-content {
    background-color: #f0f2f5;
    padding: 20px;

    .stats-row {
      margin-bottom: 20px;

      .el-card {
        :deep(.el-statistic__content) {
          font-size: 24px;
          color: #409eff;
        }
      }
    }

    .quick-access {
      margin-bottom: 20px;

      .action-label {
        margin-top: 8px;
        font-size: 12px;
        color: #666;
      }
    }

    .course-activity {
      .el-timeline {
        padding-left: 20px;
      }
    }
  }
}
</style>
